<template id='presale'>
  <div class="presale">
    <div class="path1Bg">
      <div class="path1"></div>
    </div>
    <div class="path2">
      <div class="box">
        <div class="top">
          <div class="boxlight"></div>
          <div class="countDown" v-if="countDownTime.seconds">
            <p class="countDownTitle">Time left till the sale starts</p>
            <p>{{ countDownTime.hours }}:</p>
            <p>{{ countDownTime.minutes }}:</p>
            <p class="second">{{ countDownTime.seconds }}</p>
          </div>
          <div class="eggsContent">
            <div
              class="eggsItem"
              v-for="(item, index) in eggsList"
              :key="index"
            >
              <div class="eggMix">
                <img :src="item.img" class="eggImg" />
                <img :src="item.light" class="light" />
              </div>
              <p class="eggName">{{ item.name }}</p>
              <p class="eggRemain">Quantity:{{ item.remaining }}</p>
              <p class="eggCost">Price:{{ item.cost }}</p>
              <div class="buyBtn" @click="buyEgg(item)">
                <p>BUY</p>
              </div>
            </div>
          </div>
        </div>
        <div class="main">
          <div
            class="mainItem"
            v-for="(item, index) in eggsInfoList"
            :key="index"
          >
            <div class="leftPath">
              <img :src="item.img" class="mainImg" />
              <p class="mainName">{{ item.name }}</p>
              <p class="mainTitle">{{ item.title }}</p>
            </div>
            <div class="rightPath">
              <p class="mainName">{{ item.name }}</p>
              <p class="mainTitle">{{ item.title }}</p>
              <p
                class="mainDesc"
                v-for="(element, location) in item.desc"
                :key="location"
              >
                {{ element }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <presale-popup :popupInfo="popupInfo" @close="closePopup" />
  </div>
</template>

<script>
import { PresalePopup } from "@/components";
export default {
  name: "Presale",
  components: {
    PresalePopup,
  },
  data() {
    return {
      endTime: "2022/04/15",
      countDownTime: {
        days: "",
        hours: "",
        minutes: "",
        seconds: "",
      },
      eggsBtn: require("@/assets/images/presale/btnBg.png"),
      eggsList: [
        {
          id: 1,
          img: require("@/assets/images/presale/Genesis.png"),
          imgBig: require("@/assets/images/presale/GenesisBig.png"),
          light: require("@/assets/images/presale/GenesisLight.png"),
          name: "Genesis egg",
          remaining: "10000",
          cost: "10MATIC",
        },
        {
          id: 2,
          img: require("@/assets/images/presale/Patent.png"),
          imgBig: require("@/assets/images/presale/PatentBig.png"),
          light: require("@/assets/images/presale/PatentLight.png"),
          name: "Patent egg",
          remaining: "10000",
          cost: "30MATIC",
        },
        {
          id: 3,
          img: require("@/assets/images/presale/Suit.png"),
          imgBig: require("@/assets/images/presale/SuitBig.png"),
          light: require("@/assets/images/presale/SuitLight.png"),
          name: "Fashion egg",
          remaining: "10000",
          cost: "15MATIC",
        },
      ],
      eggsInfoList: [
        {
          name: "Genesis Eggs",
          img: require("@/assets/images/presale/Genesis.png"),
          title:
            "Each Genesis Egg has a higher chance of getting a high-quality ChaCha character.",
          desc: [
            "1.A limited number of 10,000 eggs will be available during the sale.",
            "2.Each Genesis Egg costs 10MATIC, with a maximum of 1 at a time and no limit on the number of purchases.",
            "3.Each time you purchase a Genesis Egg, you will randomly receive 1 higher-quality CaCha character. The character quality is randomized based on probability.",
            "4.The ChaCha NFT characters born from the Genesis Eggs can be linked to the marketplace for trading or used directly in the game.",
            "5.Genesis Eggs open up characters with a minimum attribute guarantee, and the probability of getting a character with maximum attributes is higher than the in-game eggs.",
          ],
        },
        {
          name: "Patented Eggs",
          img: require("@/assets/images/presale/Patent.png"),
          title:
            "Each Patent Egg has a high chance of opening a high-quality ChaCha character, with a tiny chance of getting a twisted egg divided into patents.",
          desc: [
            "1.A limited number of 10,000 eggs will be available during the sale.",
            "2.Each set of eggs costs 30MATIC, a maximum of 1 at a time. There is no limit to the number of purchases.",
            "3.Each time you buy a patented egg, you have a tiny chance of getting 1 patent of the twisted egg revenue commission.",
            "4.If a player who holds a patent draws a character with a patented decoration within a certain period, '0.1 ÷ the number of privileged decorations on the character' will be added to the corresponding prize pool.",
            "5.If the egg does not contain a patent, the purchaser receives a higher quality CaCha role.",
            "6.Patents and CaCha characters obtained from patented eggs are linked to the marketplace for sale and can also be used directly in the game.",
          ],
        },
        {
          name: "Fashion Eggs",
          img: require("@/assets/images/presale/Suit.png"),
          title:
            "Each set of eggs has a high chance of getting a high-quality ChaCha character and a marginal chance of getting one with a complete set of decorations.",
          desc: [
            "1.A limited number of 10,000 units will be available for sale during the campaign period.",
            "2.Each Fashion Egg costs 15MATIC, with a maximum of 1 at a time and no limit on the number of purchases.",
            "3.Every time you buy a Fashion Egg, you will get 1 CaCha character of random quality, with a low chance of getting a unique CaCha character with a complete set of decorations and a single attribute bonus.",
            "4.The ChaCha NFT characters hatched from the Fashion Eggs link to the marketplace for trading or are used directly in the game.",
          ],
        },
      ],
      popupInfo: {
        isClickBtn: false,
        isShow: false,
        eggImg: "",
        resImg: "",
        type: "role",
        number: "#1231234154515",
        desc: "Whenever a character NFT with a live guitar is produced, the privilege holder can get a certain profit.",
        highLine: "privlege time remaning",
        Level: "Level:99",
        hours: "",
        minutes: "",
        seconds: "",
        attributeList: [
          {
            name: "Strength",
            value: 50,
          },
          {
            name: "Intelligence",
            value: 999,
          },
          {
            name: "Agility",
            value: 70,
          },
          {
            name: "Spirituality",
            value: 5,
          },
          {
            name: "Physique",
            value: 200,
          },
          {
            name: "Endurance",
            value: 3584,
          },
        ],
        attributeDesc:
          "The obtained NFT assets will be automatically deposited into your wallet, which can be viewed on the 'my assets - my role' page",
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    countTime() {
      let date, endDate;
      const u = navigator.userAgent;
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isiOS) {
        date = new Date();
        endDate = new Date(this.endTime.replace(/-/g, "/"));
      } else {
        date = new Date();
        endDate = new Date(this.endTime);
      }
      let now = date.getTime();
      let end = endDate.getTime();
      let leftTime = end - now;
      let setIntervalID = setInterval(() => {
        if (leftTime > 0) {
          this.countDownTime.days = Math.floor(leftTime / 1000 / 60 / 60 / 24);
          this.countDownTime.hours = Math.floor(
            (leftTime / 1000 / 60 / 60) % 24
          );
          this.countDownTime.minutes = Math.floor((leftTime / 1000 / 60) % 60);
          this.countDownTime.seconds = Math.floor((leftTime / 1000) % 60);
          if (this.countDownTime.days > 0) {
            this.countDownTime.hours =
              this.countDownTime.hours + this.countDownTime.days * 24;
          }
          this.countDownTime.hours =
            this.countDownTime.hours > 9
              ? this.countDownTime.hours
              : "0" + this.countDownTime.hours;
          this.countDownTime.minutes =
            this.countDownTime.minutes > 9
              ? this.countDownTime.minutes
              : "0" + this.countDownTime.minutes;
          this.countDownTime.seconds =
            this.countDownTime.seconds > 9
              ? this.countDownTime.seconds
              : "0" + this.countDownTime.seconds;
          this.popupInfo.hours = this.countDownTime.hours;
          this.popupInfo.minutes = this.countDownTime.minutes;
          this.popupInfo.seconds = this.countDownTime.seconds;
          leftTime = leftTime - 1000;
        } else {
          clearInterval(setIntervalID);
        }
      }, 1000);
    },
    buyEgg(item) {
      if (item.id == 1) {
        this.popupInfo.resImg = require("@/assets/images/presale/res1.png");
        this.popupInfo.type = "role";
      } else {
        this.popupInfo.resImg = require("@/assets/images/presale/res2.png");
        this.popupInfo.type = "patent";
      }
      this.popupInfo.isClickBtn = false;
      this.popupInfo.isShow = true;
      this.popupInfo.eggImg = item.imgBig;
    },
    closePopup() {
      this.popupInfo.isShow = false;
    },
  },
  created() {},
  mounted() {
    this.countTime();
  },
};
</script>

<style lang='less' scoped>
@import url("../assets/css/animation.css");
.presale {
  margin-top: -220px;
  user-select: none;
  padding-bottom: 220px;
  .path1Bg {
    background-image: url("../assets/images/presale/bg.png");
    background-size: 100% 100%;
    width: 100%;
    height: 1080px;
    .path1 {
      padding: 146px 261px 0 261px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  .path2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(#1f273b, #192539);
    .box {
      margin-top: -796px;
      background-image: url("../assets/images/presale/box.png");
      background-size: 100% 100%;
      width: 1637px;
      // height: 2158px;
      padding-bottom: 20px;
      position: relative;
      z-index: 2;
      .boxlight {
        background-image: url("../assets/images/presale/boxLight.png");
        background-size: 100% 100%;
        width: 1783px;
        height: 504px;
        position: absolute;
        top: 150px;
        left: -80px;
        animation: opacity5-10 1.5s linear infinite;
        -webkit-animation: opacity5-10 1.5s linear infinite;
      }
      .top {
        position: relative;
        height: 710px;
        .countDown {
          font-size: 40px;
          color: #ffffff;
          text-shadow: 0px 3px #0854bc;
          position: absolute;
          height: 95px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .countDownTitle {
            margin-right: 15px;
          }
          .second {
            min-width: 80px;
          }
        }
        .eggsContent {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 1176px;
          top: 115px;
          left: 215px;
          .eggsItem {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .eggMix {
              position: relative;
              width: 100%;
              .eggImg {
                width: 187px;
                height: 235px;
                position: absolute;
                left: 63px;
                top: 50px;
                z-index: 3;
              }
              .light {
                width: 323px;
                height: 318px;
                animation: opacity10-0-10 2s linear infinite;
                -webkit-animation: opacity10-0-10 2s linear infinite;
                z-index: 1;
              }
            }
            .eggName {
              font-size: 44px;
              color: #ffffff;
              text-shadow: 0px 3px #0854bc;
              margin-bottom: 10px;
              margin-top: -40px;
            }
            .eggRemain {
              font-size: 24px;
              color: #ffffff;
              text-shadow: 0px 2px #0854bc;
              margin-bottom: 8px;
            }
            .eggCost {
              font-size: 24px;
              color: #ffffff;
              text-shadow: 0px 2px #0854bc;
            }
            .buyBtn {
              background-image: url("../assets/images/presale/btnBg.png");
              background-size: 100% 100%;
              width: 245px;
              height: 109px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              p {
                font-size: 44px;
                color: #ffffff;
              }
            }
          }
        }
      }
      .main {
        padding: 0 170px 0 140px;
        margin-top: 30px;
        .mainItem {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .leftPath {
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 270px;
            margin-bottom: 30px;
            .mainImg {
              width: 187px;
              height: 235px;
            }
            .mainName {
              font-size: 24px;
              color: #ffffff;
              text-shadow: 0px 2px #0854bc;
              margin-bottom: 20px;
            }
            .mainTitle {
              font-size: 24px;
              color: #ffffff;
              text-shadow: 0px 2px #0854bc;
              line-height: 1.1;
            }
          }
          .rightPath {
            margin-right: 15px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            width: 994px;
            p {
              font-size: 24px;
              color: #ffffff;
              text-shadow: 0px 2px #0854bc;
              line-height: 29px;
            }
            .mainTitle,
            .mainName {
              display: none;
            }
          }
        }
        .mainItem:nth-child(2) {
          background-color: rgba(0, 0, 0, 0.06);
        }
      }
    }
  }
}
@media screen and (max-width: 450px) {
  .presale {
    .path2 {
      .box {
        width: 100%;
        height: auto;
        background-image: none;
        .top {
          height: auto;
          .boxlight {
            display: none;
          }
          .eggsContent {
            flex-direction: column;
            width: 100%;
            left: 0;
            top: 140px;
            .eggsItem {
              background-image: url("../assets/images/presale/eggsItemBg.png");
              background-size: 100% 100%;
              width: 816px;
              height: 670px;
              justify-content: flex-start;
              margin-top: -60px;
              .eggMix {
                margin-top: 60px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: auto;
              }
            }
          }
        }
        .main {
          margin-top: 120px;
          padding: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .mainItem {
            background-image: url("../assets/images/presale/eggsTextBg.png");
            background-size: 100% 100%;
            width: 635px;
            height: 415px;
            padding: 50px;
            align-items: flex-start;
            .leftPath {
              display: none;
            }
            .rightPath {
              overflow-y: scroll;
              width: auto;
              margin: 0;
              height: inherit;
              justify-content: flex-start;
              .mainDesc {
                font-size: 32px;
                line-height: 1.3;
              }
              .mainTitle,
              .mainName {
                display: block;
                font-size: 32px;
                line-height: 1.3;
              }
              .mainName {
                font-size: 36px;
              }
            }
            .rightPath::-webkit-scrollbar {
              width: 0 !important;
            }
          }
        }
      }
    }
  }
}
</style>